<template>
  <div class="solveManage">
    <!-- 订单管理  -->
    <!-- 顶部查询表单 -->
    <div class="topForm">
      <el-form ref="searchForm" :model="searchForm" label-width="70px"  :inline="true" size="mini" class="searchBox">
        <el-row>
          <el-col :span="3">
            <el-form-item label="订单号：" prop="orderNum">
              <el-input v-model="searchForm.orderNum" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="委托人：" prop="trustPeople">
              <el-input v-model="searchForm.trustPeople" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="订单状态：" prop="orderStatus">
              <el-select v-model="searchForm.orderStatus" filterable clearable>
                <el-option
                  v-for="item in statusLists"
                  :key="item.UUID"
                  :label="item.CLT_NAME"
                  :value="item.UUID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="下单时间：" prop="orderStartTime">
              <el-date-picker v-model="searchForm.orderStartTime" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="~" prop="orderEndTime" label-width="10px">
              <el-date-picker v-model="searchForm.orderEndTime" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" clearable></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="创建人：" prop="creator">
              <el-select v-model="searchForm.creator" filterable clearable>
                <el-option
                  v-for="item in statusLists"
                  :key="item.UUID"
                  :label="item.CLT_NAME"
                  :value="item.UUID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-checkbox-group v-model="searchForm.checkList">
              <el-checkbox label="是否海运订舱"></el-checkbox>
              <el-checkbox label="是否配载班列"></el-checkbox>
            </el-checkbox-group>
          </el-col>
          <el-col :span="1">
            <el-button type="primary" size="mini">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 解决方案按钮组 -->
    <div class="btnBox">
      <el-button plain size="mini" type="primary" @click="add">新增订单</el-button>
      <el-button plain size="mini" type="primary" @click="edit">修改订单</el-button>
      <el-button plain size="mini" type="primary" @click="del">取消订单</el-button>
      <el-button plain size="mini" type="primary" @click="audit">订单审核</el-button>
      <el-button plain size="mini" type="primary" @click="delAudit">取消审核</el-button>
      <el-button plain size="mini" type="primary" @click="delOrder">删除订单</el-button>
      <el-button plain size="mini" type="primary" @click="shouldGet">应收费用管理</el-button>
      <el-button plain size="mini" type="primary" @click="shouldPay">应付费用管理</el-button>
    </div>
    <!-- 主页主体表格 -->
    <div class="tableBox">
      <!-- 上方解决方案表格 -->
      <div class="topTable">
        <el-table :data="mainTopTableData" border :height="mainTopHeight" :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="mainTopRowClick">
          <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
          <el-table-column prop="tayNo" label="订单号" width="110px" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="tayIeflag" label="订单状态" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="cltName" label="下单时间" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayTaskmodels" label="作业天数" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayStates" label="客户" width="90px" show-overflow-tooltip  sortable ></el-table-column>
          <el-table-column prop="tayWrkdate" label="委托人" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayWrkdate" label="货主" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayWrkdate" label="联系人" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayWrkdate" label="联系电话" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayWrkdate" label="手机" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayWrkdate" label="起始地" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayWrkdate" label="目的地" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tdrName" label="起始港/站" width="110px" show-overflow-tooltip  sortable></el-table-column>
          <el-table-column prop="tayExpensePayable" label="目的港/站" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayExpensePayable" label="运输分类" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayPayextrafee" label="进/出口" width="100px" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="tayOprtdate" label="订单总金额" width="120px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="订单总重量(吨)" width="140px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="应收价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="应付价格" width="130px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="结算状态" width="130px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="是否海运订舱" width="130px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="是否配载班列" width="130px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="已配载箱个数" width="130px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="来源" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="附件" width="90px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="审核人" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="审核时间" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="审核/拒绝原因" width="140px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="创建人" width="110px" show-overflow-tooltip sortable ></el-table-column>
          <el-table-column prop="tayContact" label="备注" width="110px" show-overflow-tooltip sortable ></el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          ref="pagination"
          small
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Pagination.currentPage"
          :page-sizes="Pagination.pageSizeList"
          :page-size="Pagination.PageSize"
          :layout="Pagination.layout"
          :total="Pagination.total">
        </el-pagination>
      </div>
      <!-- 下方解决方案明细表格 -->
      <div class="botTable">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="订单详情" name="1">
            <el-tabs v-model="activeName" type="card">
              <el-tab-pane label="操作服务信息" name="first">
                <div class="optServiceInfo">
                  <el-button plain size="mini" type="success" @click="optServiceAdd">新增</el-button>
                  <el-button plain size="mini" type="danger" @click="optServiceDel">删除</el-button>
                </div>
                <el-table :data="mainBotTableData" border :height="mainBotHeight" :header-cell-style="{ textAlign: 'center' }"
                  :cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="mainBotRowClick">
                  <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                  <el-table-column prop="tayNo" label="服务" show-overflow-tooltip sortable></el-table-column>
                  <el-table-column prop="tayIeflag" label="起始地" show-overflow-tooltip sortable ></el-table-column>
                  <el-table-column prop="cltName" label="目的地" show-overflow-tooltip sortable ></el-table-column>
                  <el-table-column prop="tayStates" label="操作状态" show-overflow-tooltip  sortable ></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="服务动态列表" name="second">
                <div class="optServiceInfo">
                  <el-button plain size="mini" type="primary" @click="dynamicBtn">动态录入</el-button>
                  <el-button plain size="mini" type="primary" @click="dynamicEdit">动态编辑</el-button>
                  <el-button plain size="mini" type="primary" @click="optServiceDel">动态删除</el-button>
                  <el-button plain size="mini" type="primary" @click="optServiceDel">一键发布</el-button>
                  <el-button plain size="mini" type="primary" @click="optServiceDel">取消发布</el-button>
                </div>
                <el-table :data="mainBotTableData" border :height="mainBotHeight" :header-cell-style="{ textAlign: 'center' }"
                  :cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="mainBotRowClick">
                  <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                  <el-table-column type="selection"></el-table-column>
                  <el-table-column prop="tayNo" label="作业时间" show-overflow-tooltip sortable></el-table-column>
                  <el-table-column prop="tayIeflag" label="作业动作" width="110" show-overflow-tooltip sortable ></el-table-column>
                  <el-table-column prop="cltName" label="作业地点" show-overflow-tooltip sortable ></el-table-column>
                  <el-table-column prop="tayStates" label="内容" show-overflow-tooltip  sortable ></el-table-column>
                  <el-table-column prop="tayStates" label="操作时间" show-overflow-tooltip  sortable ></el-table-column>
                  <el-table-column prop="tayStates" label="操作员工" width="110" show-overflow-tooltip  sortable ></el-table-column>
                  <el-table-column prop="tayStates" label="是否发布" width="110" show-overflow-tooltip  sortable ></el-table-column>
                  <el-table-column prop="tayStates" label="备注" show-overflow-tooltip  sortable ></el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>

    <!-- 新增订单弹出框 -->
    <el-dialog v-el-drag-dialog :title="dialogTitle" :visible.sync="mainDialog" width="60%" @close="basicClose" :close-on-click-modal='false'>
      <div class="dialogBox">
        <!-- 基础信息 -->
        <div class="basicBox">
          <div class="basicTitle">
            <div class="icon">
              <span>1</span>
            </div>
            <span class="order_span2">基础信息</span>
          </div>
          <el-form ref="basicForm" :model="basicForm" :rules="basicRules" label-width="130px"  :inline="true" size="mini">
            <el-row>
              <el-col :span="8">
                <el-form-item label="客户:" prop="customer">
                  <el-popover placement="bottom" width="500" @show="nowShow" @hide="nowHide" trigger="click">
                    <selectedComponent :selectMsg="selectMsg"></selectedComponent>
                    <div class="el-input el-select el-input--mini el-input--suffix" slot="reference">
                      <el-input v-model="basicForm.customer" clearable @focus="customerMsg" size="mini"></el-input>
                      <span class="el-input__suffix">
                        <span class="el-input__suffix-inner">
                          <i class="el-select__caret el-input__icon " :class="isShow?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                        </span>
                      </span>
                    </div>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="委托人:" prop="entrustor">
                  <el-input v-model="basicForm.entrustor"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="货主:" prop="shipper">
                  <el-input v-model="basicForm.shipper"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="联系人:" prop="connect">
                  <el-input v-model="basicForm.connect"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话:" prop="connectPhone">
                  <el-input v-model="basicForm.connectPhone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机:" prop="phone">
                  <el-input v-model="basicForm.phone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="Email:" prop="email">
                  <el-input v-model="basicForm.email"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="QQ:" prop="qq">
                  <el-input v-model="basicForm.qq"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="微信:" prop="wechat">
                  <el-input v-model="basicForm.wechat"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="发货方:" prop="sendGoods">
                  <el-popover placement="bottom" width="500" @show="nowShow1" @hide="nowHide1" trigger="click">
                    <selectedComponent :selectMsg="selectMsg"></selectedComponent>
                    <div class="el-input el-select el-input--mini el-input--suffix" slot="reference">
                      <el-input v-model="basicForm.sendGoods" clearable @input="sendGoodsMsg" size="mini"></el-input>
                      <span class="el-input__suffix">
                        <span class="el-input__suffix-inner">
                          <i class="el-select__caret el-input__icon " :class="isShow1?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                        </span>
                      </span>
                    </div>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发货方联系人:" prop="sendGoodsConnect">
                  <el-input v-model="basicForm.sendGoodsConnect"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发货方联系方式:" prop="sendGoodsPhone">
                  <el-input v-model="basicForm.sendGoodsPhone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="收货方:" prop="getGoods">
                  <el-popover placement="bottom" width="500" @show="nowShow2" @hide="nowHide2" trigger="click">
                    <selectedComponent :selectMsg="selectMsg"></selectedComponent>
                    <div class="el-input el-select el-input--mini el-input--suffix" slot="reference">
                      <el-input v-model="basicForm.getGoods" clearable @focus="getGoodsMsg" size="mini"></el-input>
                      <span class="el-input__suffix">
                        <span class="el-input__suffix-inner">
                          <i class="el-select__caret el-input__icon " :class="isShow2?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                        </span>
                      </span>
                    </div>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货方联系人:" prop="getGoodsConnect">
                  <el-input v-model="basicForm.getGoodsConnect"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货方联系方式:" prop="getGoodsPhone">
                  <el-input v-model="basicForm.getGoodsPhone"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="备注:" prop="basicNote">
                  <el-input type="textarea" v-model="basicForm.basicNote" style="width: 600px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 服务信息 -->
        <div class="serveBox">
          <div class="basicTitle">
            <div class="icon">
              <span>2</span>
            </div>
            <span class="order_span2">服务信息</span>
          </div>
          <div class="serveContent">
            <div class="serveContentLeft">
              <el-form ref="serveForm" :model="serveForm" :rules="serveRules" label-width="100px"  :inline="true" size="mini">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="解决方案:" prop="solveMethods">
                      <el-popover placement="bottom" width="500" @show="nowShow3" @hide="nowHide3" trigger="click">
                        <selectedComponent :selectMsg="selectMsg"></selectedComponent>
                        <div class="el-input el-select el-input--mini el-input--suffix" slot="reference">
                          <el-input v-model="serveForm.solveMethods" clearable @focus="solveMethodsMsg" size="mini"></el-input>
                          <span class="el-input__suffix">
                            <span class="el-input__suffix-inner">
                              <i class="el-select__caret el-input__icon " :class="isShow3?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                            </span>
                          </span>
                        </div>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="作业天数:" prop="workDays">
                      <el-input v-model="serveForm.workDays" clearable></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="运输分类:" prop="transportCate">
                      <el-select v-model="serveForm.transportCate" filterable clearable :disabled="transPortDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="进/出口:" prop="inOutRadio">
                      <el-radio v-model="serveForm.inOutRadio" label="1">进口</el-radio>
                      <el-radio v-model="serveForm.inOutRadio" label="2">出口</el-radio>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="起始地:" prop="startPlace">
                      <el-select v-model="serveForm.startPlace" filterable clearable>
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="目的地:" prop="endPlace">
                      <el-select v-model="serveForm.endPlace" filterable clearable>
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="起始港/站:" prop="startPort">
                      <el-select v-model="serveForm.startPort" filterable clearable>
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="目的港/站:" prop="endPort">
                      <el-select v-model="serveForm.endPort" filterable clearable>
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <!-- 箱信息 -->
            <div class="serveContentRight">
              <div class="srBtnBox">
                <el-button plain size="mini" type="success" @click="serveAdd">新增</el-button>
                <el-button plain size="mini" type="danger" @click="serveDel">删除</el-button>
              </div>
              <el-table :data="serveTableData" border :height="serveTableHeight" :header-cell-style="{ textAlign: 'center' }"
                :cell-style="{ textAlign: 'center' }" highlight-current-row>
                <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
                <el-table-column prop="boxSize" label="尺寸" show-overflow-tooltip sortable>
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.boxSize" clearable size="mini" v-if="scope.row.status">
                      <el-option
                        v-for="item in boxSizeList"
                        :key="item.label"
                        :label="item.value"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                    <span v-else>{{scope.row.boxSize}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="boxStyle" label="箱型" show-overflow-tooltip sortable>
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.boxStyle" clearable size="mini" v-if="scope.row.status">
                      <el-option
                        v-for="item in boxStyleList"
                        :key="item.label"
                        :label="item.value"
                        :value="item.value"
                      ></el-option>
                    </el-select>
                    <span v-else>{{scope.row.boxStyle}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="boxNum" label="数量" show-overflow-tooltip sortable>
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.boxNum" clearable size="mini" v-if="scope.row.status"></el-input>
                    <span v-else>{{scope.row.boxNum}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- 解决方案明细 -->
        <div class="solveMethodsDetailBox">
          <div class="basicTitle">
            <div class="icon">
              <span>3</span>
            </div>
            <span class="order_span2">解决方案明细</span>
          </div>
          <!-- 解决方案表格 -->
          <el-table :data="solveTableData" border :height="solveTableHeight" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" highlight-current-row>
            <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
            <el-table-column prop="tayNo" label="服务代码" width="110px" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="tayIeflag" label="供应商" width="100px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="cltName" label="经营人" width="100px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayTaskmodels" label="起始地" width="100px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayStates" label="目的地" width="90px" show-overflow-tooltip  sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="起始港" width="90px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="目的港" width="90px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="20GP价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="20GP币种" width="120px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="40GP价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="40GP币种" width="120px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="40HQ价格" width="120px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tdrName" label="40HQ币种" width="120px" show-overflow-tooltip  sortable></el-table-column>
            <el-table-column prop="tayContact" label="创建人" width="90px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayContact" label="创建时间" width="110px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayContact" label="修改人" width="100px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayContact" label="修改时间" width="110px" show-overflow-tooltip sortable ></el-table-column>
          </el-table>
        </div>
        <!-- 货物信息 -->
        <div class="goodsInfoBox">
          <div class="basicTitle">
            <div class="icon">
              <span>4</span>
            </div>
            <span class="order_span2">货物信息</span>
          </div>
          <!-- 按钮组 -->
          <div class="goodsBtnBox">
            <el-button plain size="mini" type="success" @click="goodsAdd">新增</el-button>
            <el-button plain size="mini" type="danger" @click="goodsDel">删除</el-button>
          </div>
          <!-- 解决方案表格 -->
          <el-table :data="goodsTableData" border :height="goodsTableHeight" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }" highlight-current-row>
            <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
            <el-table-column prop="tayNo" label="货物分类" show-overflow-tooltip sortable>
              <template slot-scope="scope">
                <el-select v-model="scope.row.boxSize" clearable size="mini" v-if="scope.row.status">
                  <el-option
                    v-for="item in boxSizeList"
                    :key="item.label"
                    :label="item.value"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <span v-else>{{scope.row.boxSize}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="tayIeflag" label="中文品名" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="cltName" label="英文品名" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayTaskmodels" label="件数" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayStates" label="重量"  show-overflow-tooltip  sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="体积" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayWrkdate" label="包装" show-overflow-tooltip sortable >
              <template slot-scope="scope">
                <el-select v-model="scope.row.boxSize" clearable size="mini" v-if="scope.row.status">
                  <el-option
                    v-for="item in boxSizeList"
                    :key="item.label"
                    :label="item.value"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <span v-else>{{scope.row.boxSize}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 拖车服务 -->
        <div class="truckServiceBox">
          <div class="basicTitle">
            <div class="icon">
              <span>5</span>
            </div>
            <span class="order_span2">拖车服务</span>
          </div>
          <!-- 发货地，目的地拖车 -->
          <div class="serviceBox">
            <!-- 发货地服务 -->
            <div class="startBox">
              <div class="startTitle">发货地服务</div>
              <el-checkbox style="padding: 0 0 10px 10px;" v-model="startChecked">拖车：</el-checkbox>
              <el-form ref="startCarForm" :model="startCarForm" :rules="startCarRules" label-width="80px" :inline="true" size="mini">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="联系人:" prop="connect">
                      <el-input v-model="startCarForm.connect" clearable :disabled="startDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系电话:" prop="connectPhone" label-width="90px">
                      <el-input v-model="startCarForm.connectPhone" clearable :disabled="startDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="地址:" prop="province">
                      <el-select v-model="startCarForm.province" filterable clearable :disabled="startDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="town">
                      <el-select style="margin-left: 10px" v-model="startCarForm.town" filterable clearable :disabled="startDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="county">
                      <el-select style="margin-left: 10px" v-model="startCarForm.county" filterable clearable :disabled="startDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item prop="detailAddress" label="    " class="detailAddressBox">
                      <el-input v-model="startCarForm.detailAddress" placeholder="请输入详细地址" clearable :disabled="startDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <!-- 目的地服务 -->
            <div class="endBox">
              <div class="endTitle">目的地服务</div>
              <el-checkbox style="padding: 0 0 10px 10px;" v-model="endChecked">拖车：</el-checkbox>
              <el-form ref="endCarForm" :model="endCarForm" :rules="endCarRules" label-width="80px" :inline="true" size="mini">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="联系人:" prop="connect">
                      <el-input v-model="endCarForm.connect" clearable :disabled="endDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系电话:" prop="connectPhone" label-width="90px">
                      <el-input v-model="endCarForm.connectPhone" clearable :disabled="endDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="地址:" prop="province">
                      <el-select v-model="endCarForm.province" filterable clearable :disabled="endDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="town">
                      <el-select style="margin-left: 10px" v-model="endCarForm.town" filterable clearable :disabled="endDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item prop="county">
                      <el-select style="margin-left: 10px" v-model="endCarForm.county" filterable clearable :disabled="endDisabled">
                        <el-option
                          v-for="item in statusLists"
                          :key="item.UUID"
                          :label="item.CLT_NAME"
                          :value="item.UUID"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item prop="detailAddress" label="    " class="detailAddressBox">
                      <el-input v-model="endCarForm.detailAddress" placeholder="请输入详细地址" clearable :disabled="endDisabled"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 附件信息 -->
        <div class="attachmentInfoBox">
          <div class="basicTitle">
            <div class="icon">
              <span>6</span>
            </div>
            <span class="order_span2">附件信息</span>
          </div>
        </div>
        <!-- 协议费用信息 -->
        <div class="agreeFeeInfoBox" v-if="this.dialogStatus == 'audit' || this.dialogStatus == 'delAudit'">
          <div class="basicTitle">
            <div class="icon">
              <span>7</span>
            </div>
            <span class="order_span2">协议费用信息</span>
          </div>
          <el-form ref="agreeFeeForm" :model="agreeFeeForm" label-width="130px"  :inline="true" size="mini">
            <el-row>
              <el-col :span="24">
                <el-form-item label="客户协议:" prop="customerAgree">
                  <el-select v-model="agreeFeeForm.customerAgree" filterable clearable>
                    <el-option
                      v-for="item in statusLists"
                      :key="item.UUID"
                      :label="item.CLT_NAME"
                      :value="item.UUID"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="订单总金额(RMB):" prop="orderRMB">
                  <el-input v-model="agreeFeeForm.orderRMB" clearable></el-input>
                </el-form-item>
                <el-form-item label="订单总金额(USD):" prop="orderUSD">
                  <el-input v-model="agreeFeeForm.orderUSD" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 审核信息 -->
        <div class="auditInfoBox" v-if="this.dialogStatus == 'audit' || this.dialogStatus == 'delAudit'">
          <div class="basicTitle">
            <div class="icon">
              <span>8</span>
            </div>
            <span class="order_span2">审核信息</span>
          </div>
          <div class="auditInfoBot">
            <div>审核意见：</div>
            <el-input type="textarea" v-model="auditSuggest" style="width: 600px"></el-input>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mainDialog = false">关闭</el-button>
        <el-button type="primary" v-if="this.dialogStatus == 'add' || this.dialogStatus == 'edit'" @click="dialogSave">保存</el-button>
        <el-button type="primary" v-if="this.dialogStatus == 'audit'" @click="dialogAudit">审核</el-button>
        <el-button type="primary" v-if="this.dialogStatus == 'audit' || this.dialogStatus == 'delAudit'" @click="dialogRefuse">拒绝</el-button>
        <el-button type="primary" v-if="this.dialogStatus == 'delAudit'" @click="dialogDelAudit">取消审核</el-button>
      </span>
    </el-dialog>

    <!-- 应收费用之前的判断币种弹窗 -->
    <el-dialog v-el-drag-dialog :title="moneyCateTitle" :visible.sync="moneyCateDialog" width="20%" style="top: 30%" :close-on-click-modal='false'>
      <el-radio v-model="moneyCateRadio" label="1">人民币</el-radio>
      <el-radio v-model="moneyCateRadio" label="2">美元</el-radio>

      <span slot="footer" class="dialog-footer">
        <el-button @click="moneyCateDialog = false">取消</el-button>
        <el-button type="primary" @click="moneyCateSure">确定</el-button>
      </span>
    </el-dialog> 

    <!-- 应收费用弹窗 -->
    <el-dialog v-el-drag-dialog :title="feeDialogTitle" :visible.sync="feeDialog" width="60%" :close-on-click-modal='false'>
      <div class="feeDialogBox">
        <!-- 左侧 -->
        <div class="feeLeftBox">
          <div class="feeLeftTitle">{{feeLeftTitle}}</div>
          <!-- 上方订单信息表单 -->
          <div class="feeLeftTopBox">
            <div class="feeLeftTopTitle">订单信息</div>
            <el-form ref="orderInfoForm" :model="orderInfoForm" label-width="110px" size="mini" class="orderInfo">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="订单号:" prop="orderNum">
                    <el-input v-model="orderInfoForm.orderNum" clearable disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="客户:" prop="customer">
                    <el-input v-model="orderInfoForm.customer" clearable disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="起始港/站:" prop="startPort">
                    <el-input v-model="orderInfoForm.startPort" clearable disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="目的港/站:" prop="endPort">
                    <el-input v-model="orderInfoForm.endPort" clearable disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="委托人:" prop="trustPeople">
                    <el-input v-model="orderInfoForm.trustPeople" clearable disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="联系人:" prop="connect">
                    <el-input v-model="orderInfoForm.connect" clearable disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="联系电话:" prop="connectPhone">
                    <el-input v-model="orderInfoForm.connectPhone" clearable disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <!-- 增值服务表格 -->
          <div class="feeLeftBotBox">
            <div class="feeLeftBotTitle">增值服务</div>
            <el-table :data="addValueServeData" border :height="addValueServeHeight" :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }" highlight-current-row style="margin-top: 20px">
              <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
              <el-table-column prop="tayNo" label="序列" width="80" show-overflow-tooltip sortable></el-table-column>
              <el-table-column prop="tayIeflag" label="类型" show-overflow-tooltip sortable ></el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="feeRightBox">
          <div class="feeRightTopBox">
            <div class="feeRightTopTitle">费目明细</div>
            <!-- 费目明细按钮组 -->
            <div class="feeRightBtnBox">
              <el-button plain size="mini" type="success" @click="feeDetailAdd">新增</el-button>
              <el-button plain size="mini" type="danger" @click="feeDetailDel">删除</el-button>
              <el-button plain size="mini" type="primary" @click="feeDetailMoney">统计金额</el-button>
            </div>
            <!-- 费目明细表格 -->
            <el-table :data="feeDetailTableData" border :height="feeDetailTableHeight" :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }" highlight-current-row>
              <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
              <el-table-column prop="feeNum" label="费目" width="180px" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span v-if="scope.row.status" style="color: blue" @click="showSecondDialog">{{scope.row.feeNum}}</span>
                  <span v-if="!scope.row.status" style="color: black">{{scope.row.feeNum}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="tayIeflag" label="单位" show-overflow-tooltip ></el-table-column>
              <el-table-column prop="cltName" label="箱型" show-overflow-tooltip ></el-table-column>
              <el-table-column prop="tayTaskmodels" label="尺寸" show-overflow-tooltip ></el-table-column>
              <el-table-column prop="tayStates" label="数量" show-overflow-tooltip  ></el-table-column>
              <el-table-column prop="tayWrkdate" label="单价" show-overflow-tooltip ></el-table-column>
              <el-table-column prop="tayWrkdate" label="参考价" show-overflow-tooltip ></el-table-column>
              <el-table-column prop="tayWrkdate" label="金额" show-overflow-tooltip ></el-table-column>
              <el-table-column prop="tayWrkdate" label="币种" show-overflow-tooltip ></el-table-column>
            </el-table>
          </div>
          <div class="feeRightBotBox">
            <div class="feeRightBotTitle">统计信息</div>
            <!-- 统计信息表格 -->
            <el-table :data="totalInfoTableData" border :height="totalInfoTableHeight" :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }" highlight-current-row style="margin-top: 20px">
              <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
              <el-table-column prop="tayNo" label="币种" show-overflow-tooltip ></el-table-column>
              <el-table-column prop="tayIeflag" label="累计数量" show-overflow-tooltip ></el-table-column>
              <el-table-column prop="tayIeflag" label="累计金额" show-overflow-tooltip ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="feeDialog = false">关闭</el-button>
        <el-button type="primary" @click="feeDialogSave">保存</el-button>
      </span>
    </el-dialog>

    <!-- 费目明细点击选择后 二级弹窗 -->
    <el-dialog v-el-drag-dialog :title="secondDialogTitle" :visible.sync="secondDialog" width="40%" style="top: 12vh" :close-on-click-modal='false'>
      <secondComponent></secondComponent>
    </el-dialog>

    <!-- 主页下方 操作服务信息新增按钮 弹窗 -->
    <el-dialog v-el-drag-dialog title="订单操作" :visible.sync="optServeInfoDialog" width="35%" :close-on-click-modal='false' style="top: 20%">
      <div class="orderOptBox">
        <div class="orderOptTitle">基础信息</div>
        <el-form ref="orderBasicForm" :model="orderBasicForm" :rules="orderBasicRules" label-width="90px"  :inline="true" size="mini">
          <el-row>
            <el-col :span="12">
              <el-form-item label="操作类型:" prop="optStyle">
                <el-select v-model="orderBasicForm.optStyle" filterable clearable>
                  <el-option
                    v-for="item in statusLists"
                    :key="item.UUID"
                    :label="item.CLT_NAME"
                    :value="item.UUID"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作序列:" prop="optList">
                <el-input v-model="orderBasicForm.optList"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="起始港:" prop="startPort">
                <el-select v-model="orderBasicForm.startPort" filterable clearable>
                  <el-option
                    v-for="item in statusLists"
                    :key="item.UUID"
                    :label="item.CLT_NAME"
                    :value="item.UUID"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目的港:" prop="endPort">
                <el-select v-model="orderBasicForm.endPort" filterable clearable>
                  <el-option
                    v-for="item in statusLists"
                    :key="item.UUID"
                    :label="item.CLT_NAME"
                    :value="item.UUID"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="备注:" prop="note">
                <el-input type="textarea" v-model="orderBasicForm.note" style="width: 450px"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="optServeInfoDialog = false">取消</el-button>
        <el-button type="primary" @click="orderOptSure">确定</el-button>
      </span>
    </el-dialog>

    <!-- 主页下方 服务动态列表动态录入弹窗 -->
    <el-dialog v-el-drag-dialog :title="dynamicTitle" :visible.sync="dynamicDialog" width="40%" style="top: 12vh" :close-on-click-modal='false'>
      <el-form ref="dynamicForm" :model="dynamicForm" :rules="dynamicRules" label-width="90px"  :inline="true" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业动态:" prop="workDynamic">
              <el-popover placement="bottom" width="500" @show="nowShow4" @hide="nowHide4" trigger="click">
                <selectedComponent :selectMsg="selectMsg"></selectedComponent>
                <div class="el-input el-select el-input--mini el-input--suffix" slot="reference">
                  <el-input v-model="dynamicForm.workDynamic" clearable @focus="workDynamicMsg" size="mini"></el-input>
                  <span class="el-input__suffix">
                    <span class="el-input__suffix-inner">
                      <i class="el-select__caret el-input__icon " :class="isShow4?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                    </span>
                  </span>
                </div>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作业时间:" prop="workTime">
              <el-date-picker v-model="dynamicForm.workTime" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否发布:" prop="issue">
              <el-select v-model="dynamicForm.issue" filterable clearable>
                <el-option
                  v-for="item in statusLists"
                  :key="item.UUID"
                  :label="item.CLT_NAME"
                  :value="item.UUID"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="作业地点:" prop="workPlace">
              <el-input v-model="dynamicForm.workPlace" clearable style="width: 450px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="内容:" prop="content">
              <el-input type="textarea" v-model="dynamicForm.content" style="width: 500px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item label="备注:" prop="note">
              <el-input type="textarea" v-model="dynamicForm.note" style="width: 500px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dynamicDialog = false">取消</el-button>
        <el-button type="primary" @click="dynamicSave">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import resizeMixin from '@/mixins/resize'
import paginationMixin from '@/mixins/pagination'
import secondComponent from './secondComponent'
import selectedComponent from './selectedComponent'
export default {
  name: 'router.theOrderManage',
  mixins: [resizeMixin, paginationMixin],
  data() {
    return {
      searchForm: {
        orderNum: '', // 订单号
        trustPeople: '', // 委托人
        orderStatus: '', // 订单状态
        orderStartTime: '', // 下单时间  开始
        orderEndTime: '', // 下单时间  结束
        creator: '', // 创建人
        checkList: [], // 复选框
      },
      placeLists: [], // 起始地，目的地下拉框数据
      statusPlace: [], // 状态下拉框数据
      mainTopTableData: [], // 主页上方 解决方案表格数据
      mainTopHeight: 380, // 主页上方 表格高度
      mainBotTableData: [], // 主页下方 订单详情表格数据
      mainBotHeight: 200, // 主页下方 订单详情表格高度
      activeNames: ['1'], // 控制主页下方 解决方案明细表格的展示
      activeName: 'first', // 控制主页下方tab栏切换 

      dialogStatus: '', // 判断弹窗是点击哪个弹出
      dialogTitle: '', // 新增弹窗标题
      mainDialog: false, // 控制新增弹窗的出现与隐藏
      // 基础信息表单
      basicForm: {
        customer: '', // 客户
        entrustor: '', // 委托人
        shipper: '', // 货主
        connect: '', // 联系人
        connectPhone: '', // 联系电话
        phone: '', // 手机
        email: '', // email
        qq: '', // qq
        wechat: '', // 微信
        sendGoods: '', // 发货方
        sendGoodsConnect: '', // 发货方联系人
        sendGoodsPhone: '', // 发货方联系方式
        getGoods: '', // 收货方
        getGoodsConnect: '', // 收货方联系人
        getGoodsPhone: '', // 收货方联系方式
        basicNote: '', // 备注
      }, 
      basicRules: {
        customer: [
          { required: true, message: '请选择客户', trigger: 'blur' },
        ],
        entrustor: [
          { required: true, message: '请输入委托人', trigger: 'blur' },
        ],
        shipper: [
          { required: true, message: '请输入货主', trigger: 'blur' },
        ],
        connect: [
          { required: true, message: '请输入联系人', trigger: 'blur' },
        ],
        sendGoods: [
          { required: true, message: '请选择发货方', trigger: 'blur' },
        ],
        sendGoodsConnect: [
          { required: true, message: '请输入发货方联系人', trigger: 'blur' },
        ],
        sendGoodsPhone: [
          { required: true, message: '请输入发货方联系方式', trigger: 'blur' },
        ],
        getGoods: [
          { required: true, message: '请选择收货方', trigger: 'blur' },
        ],
        getGoodsConnect: [
          { required: true, message: '请输入收货方联系人', trigger: 'blur' },
        ],
        getGoodsPhone: [
          { required: true, message: '请输入收货方联系方式', trigger: 'blur' },
        ],
      },
      // 服务信息表单
      serveForm: {
        solveMethods: '', // 解决方案
        workDays: '', // 作业天数
        transportCate: '', // 运输分类
        inOutRadio: '1', // 进出口
        startPlace: '', // 起始地
        endPlace: '', // 目的地
        startPort: '', // 起始港站
        endPort: '', // 目的港站
      },
      serveRules: {
        workDays: [
          { required: true, message: '请输入作业天数', trigger: 'blur' },
        ],
        transportCate: [
          { required: true, message: '运输分类不能为空', trigger: 'blur' },
        ],
        inOutRadio: [
          { required: true, message: '请选择进出口', trigger: 'blur' },
        ],
        startPlace: [
          { required: true, message: '请选择起始地', trigger: 'blur' },
        ],
        endPlace: [
          { required: true, message: '请选择目的地', trigger: 'blur' },
        ],
        startPort: [
          { required: true, message: '请选择起始港站', trigger: 'blur' },
        ],
        endPort: [
          { required: true, message: '请选择目的港站', trigger: 'blur' },
        ],
      },
      transPortDisabled: true, // 控制新增弹窗 服务信息 运输分类下拉禁止输入
      serveTableData: [], // 服务信息表格数据
      serveTableHeight: 180, // 服务信息表格高度
      solveTableData: [], // 解决方案明细表格数据
      solveTableHeight: 160, // 解决方案明细表格高度
      goodsTableData: [], // 货物信息表格数据
      goodsTableHeight: 160, // 货物信息表格高度
      // 拖车服务  发货地服务
      startCarForm: {
        connect: '', // 联系人
        connectPhone: '', // 联系电话
        province: '', // 地址   省
        town: '', // 地址   市
        county: '', // 地址   区县
        detailAddress: '', // 详细地址
      },
      startCarRules:{
        connect: [
          { required: true, message: '联系人不能为空', trigger: 'blur' },
        ],
        connectPhone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' },
        ],
        province: [
          { required: true, message: '省份不能为空', trigger: 'blur' },
        ],
        town: [
          { required: true, message: '市不能为空', trigger: 'blur' },
        ],
        county: [
          { required: true, message: '区县不能为空', trigger: 'blur' },
        ],
      },
      // 拖车服务  目的地服务
      endCarForm: {
        connect: '', // 联系人
        connectPhone: '', // 联系电话
        province: '', // 地址   省
        town: '', // 地址   市
        county: '', // 地址   区县
        detailAddress: '', // 详细地址
      },
      endCarRules:{
        connect: [
          { required: true, message: '联系人不能为空', trigger: 'blur' },
        ],
        connectPhone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' },
        ],
        province: [
          { required: true, message: '省份不能为空', trigger: 'blur' },
        ],
        town: [
          { required: true, message: '市不能为空', trigger: 'blur' },
        ],
        county: [
          { required: true, message: '区县不能为空', trigger: 'blur' },
        ],
      },
      startChecked: false, // 控制发货地拖车勾选框
      endChecked: false, // 控制目的地拖车勾选框
      startDisabled: true, // 控制发货地输入框禁止输入
      endDisabled: true, // 控制目的地输入框禁止输入
      // 协议费用信息
      agreeFeeForm: {
        customerAgree: '', // 客户协议
        orderRMB: '', // 订单总金额(RMB)
        orderUSD: '', // 订单总金额(USD)
      },
      auditSuggest: '', // 审核意见

      // 费收弹窗
      moneyCateTitle: '', // 选择币种弹窗  标题
      moneyCateDialog: false, // 控制选择币种弹窗展示
      moneyCateRadio: '1', // 费用管理弹窗选择币种
      feeDialog: false, // 控制费收弹窗展示
      feeDialogTitle: '', // 费收弹窗标题
      feeLeftTitle: '', // 费收弹窗左上方标题
      orderInfoForm: {
        orderNum: 'TEST20200217000001', // 订单号
        customer: '测试企业名称', // 客户
        startPort: '遵义场站', // 起始港站
        endPort: '兴隆场站', // 目的港站
        trustPeople: '测试企业', // 委托人
        connect: '真厉害', // 联系人
        connectPhone: '11111', // 联系电话
      },
      addValueServeData: [], // 增值服务表格数据
      addValueServeHeight: 240, // 增值服务表格高度
      feeDetailTableData: [], // 费目明细表格数据
      feeDetailTableHeight: 280, // 费目明细表格高度
      totalInfoTableData: [], // 统计信息表格数据
      totalInfoTableHeight: 220, // 统计信息表格高度

      // 操作服务信息新增弹窗
      optServeInfoDialog: false, // 控制操作服务信息新增弹窗展示
      orderBasicForm: {
        optStyle: '', // 操作类型
        optList: '', // 操作序列
        startPort: '', // 起始港
        endPort: '', // 目的港
        note: '', // 备注
      },
      orderBasicRules: {
        optStyle: [
          { required: true, message: '操作类型不能为空', trigger: 'blur' },
        ],
        startPort: [
          { required: true, message: '起始港不能为空', trigger: 'blur' },
        ],
        endPort: [
          { required: true, message: '目的港不能为空', trigger: 'blur' },
        ],
      },
      // 服务动态列表 动态录入弹窗
      dynamicDialog: false, // 控制服务动态列表 动态录入弹窗展示
      dynamicTitle: '', // 服务动态列表 动态录入弹窗标题
      dynamicForm: {
        workDynamic: '', // 作业动态
        workTime: '', // 作业时间
        issue: '', // 是否发布
        workPlace: '', // 作业地点
        content: '', // 内容
        note: '', // 备注
      },
      dynamicRules: {
        workDynamic: [
          { required: true, message: '作业动态不能为空', trigger: 'blur' },
        ],
        workTime: [
          { required: true, message: '作业时间不能为空', trigger: 'blur' },
        ],
        issue: [
          { required: true, message: '是否发布不能为空', trigger: 'blur' },
        ],
        workPlace: [
          { required: true, message: '作业地点不能为空', trigger: 'blur' },
        ],
      },

      // 二级弹窗
      secondDialog: false, // 控制二级弹窗是否展示
      secondDialogTitle: '', // 控制二级弹窗标题

      // 下拉框是表格的相关操作
      isShow:false,
      isShow1:false,
      isShow2:false,
      isShow3:false,
      isShow4:false,
      selectMsg:'',
    }
  },
  computed: {
  },
  components: {
    secondComponent,
    selectedComponent
  },
  watch: {
    startChecked() {
      if(this.startChecked == false) {
        this.startDisabled = true
      }else {
        this.startDisabled = false
      }
    },
    endChecked() {
      if(this.endChecked == false) {
        this.endDisabled = true
      }else {
        this.endDisabled = false
      }
    },
  },
  mounted() {
  },
  created() {
  },
  methods: {
    // 控制下拉框弹出表格
    nowShow() {
      this.isShow = true
    },
    nowShow1() {
      this.isShow1 = true
    },
    nowShow2() {
      this.isShow2 = true
    },
    nowShow3() {
      this.isShow3 = true
    },
    nowShow4() {
      this.isShow4 = true
    },
    nowHide(){
      this.isShow = false
    },
    nowHide1(){
      this.isShow1 = false
    },
    nowHide2(){
      this.isShow2 = false
    },
    nowHide3(){
      this.isShow3 = false
    },
    nowHide4(){
      this.isShow4 = false
    },
    // 下拉框为表格的焦点获取事件
    // 客户
    customerMsg() {
      this.selectMsg = 'customer'
    },
    // 发货方
    sendGoodsMsg() {
      this.selectMsg = 'sendGoods'
    },
    // 收货方
    getGoodsMsg() {
      this.selectMsg = 'getGoods'
    },
    // 解决方案
    solveMethodsMsg() {
      this.selectMsg = 'solveMethods'
    },
    // 作业动态
    workDynamicMsg() {
      this.selectMsg = 'workDynamic'
    },
    // 主页搜索
    searchBtn() {
      console.log('查询')
    },
    // 主页新增订单
    add() {
      this.mainDialog = true
      this.dialogTitle = '新增订单信息'
      this.dialogStatus = 'add'
    },
    // 主页修改订单
    edit() {
      this.dialogTitle = '编辑订单信息'
      this.dialogStatus = 'edit'
      this.mainDialog = true
    },
    // 主页取消订单
    del() {
      console.log('del')
    },
    // 主页订单审核
    audit() {
      this.dialogTitle = '确认审核'
      this.dialogStatus = 'audit'
      this.mainDialog = true
    },
    // 主页取消审核
    delAudit() {
      this.dialogTitle = '取消审核'
      this.dialogStatus = 'delAudit'
      this.mainDialog = true
    },
    // 主页删除订单
    delOrder() {
      console.log('delOrder')
    },
    // 主页应收费用管理
    shouldGet() {
      this.moneyCateTitle = '应收费用管理-选择币种'
      this.moneyCateDialog = true
      this.feeLeftTitle = '应收费用信息'
    },
    // 主页应付费用管理
    shouldPay() {
      this.moneyCateTitle = '应付费用管理-选择币种'
      this.moneyCateDialog = true
      this.feeLeftTitle = '应付费用信息'
      // this.feeDialog = true
    },
    // 新增弹窗 箱信息 新增按钮
    serveAdd() {
      let list = {
        status: 1
      }
      this.serveTableData.unshift(list)
    },
    // 新增弹窗 货物信息 新增按钮
    goodsAdd() {
      let list = {
        status: 1
      }
      this.goodsTableData.unshift(list)
    },
    // 监听弹窗关闭
    basicClose() {
      this.dialogStatus = ''
    },
    // 费用管理弹窗的币种选择 确定按钮
    moneyCateSure() {
      if(this.moneyCateTitle == '应收费用管理-选择币种' && this.moneyCateRadio == 1) {
        this.moneyCateDialog = false
        this.feeDialogTitle = '应收费用管理'
        this.feeLeftTitle = '应收人民币费用信息'
        this.feeDialog = true
      }else if(this.moneyCateTitle == '应收费用管理-选择币种' && this.moneyCateRadio == 2) {
        this.moneyCateDialog = false
        this.feeDialogTitle = '应收费用管理'
        this.feeLeftTitle = '应收美金费用信息'
        this.feeDialog = true
      }else if(this.moneyCateTitle == '应付费用管理-选择币种' && this.moneyCateRadio == 1) {
        this.moneyCateDialog = false
        this.feeDialogTitle = '应付费用管理'
        this.feeLeftTitle = '应付人民币费用信息'
        this.feeDialog = true
      }else if(this.moneyCateTitle == '应付费用管理-选择币种' && this.moneyCateRadio == 2) {
        this.moneyCateDialog = false
        this.feeDialogTitle = '应付费用管理'
        this.feeLeftTitle = '应付美金费用信息'
        this.feeDialog = true
      }
      // console.log(this.moneyCateRadio)
    },
    // 费目弹窗右侧费目明细新增按钮
    feeDetailAdd() {
      let list = {
        status: 1,
        feeNum: '选择'
      }
      this.feeDetailTableData.unshift(list)
    },
    // 点击费目明细列表的 选择 按钮展示二级弹窗
    showSecondDialog() {
      this.secondDialogTitle = '选择费目'
      this.secondDialog = true
      console.log('123')
    },
    // 监听主页下方表格的展示
    handleChange(val) {
      if(val.length == 0) {
        this.mainTopHeight = 660
      }else {
        this.mainTopHeight = 380
      }
      console.log(val)
    },
    // 弹窗保存按钮
    dialogSave() {
      this.mainDialog = false
    },
    // 主页  下方表格  操作服务信息新增按钮
    optServiceAdd() {
      this.optServeInfoDialog = true
    },
    // 主页  下方表格  服务动态列表 动态录入按钮
    dynamicBtn() {
      this.dynamicTitle = '动态录入'
      this.dynamicDialog = true
    },
    // 主页  下方表格  服务动态列表 动态录入按钮
    dynamicEdit() {
      this.dynamicTitle = '动态编辑'
      this.dynamicDialog = true
    },
  }
}
</script>

<style lang="scss" scoped>
.solveManage {
  .topForm {
    padding-top: 10px;
  }
  .btnBox {
    padding-left: 10px;
  }
  .tableBox {
    .topTable {
      padding-top: 10px;
    }
    .block {
      height: 40px;
    }
    ::v-deep .botTable {
      .el-collapse-item__header {
        padding-left: 10px;
      }
      .el-collapse-item__content {
        padding-bottom: 0;
      }
      .optServiceInfo {
        padding-left: 10px;
        margin-bottom: 5px;
      }
    }
  }
}
// 弹窗内的样式
.dialogBox {
  width: 100%;
  // height: 700px;
  .basicBox {
    width: 100%;
    height: 340px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    ::v-deep .el-select {
      .el-input__inner {
        width: 178px;
      }
    }
  }
  .serveBox {
    width: 100%;
    height: 280px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    .serveContent {
      margin-top: 50px;
      width: 100%;
      height: 218px;
      display: flex;
      justify-content: space-between;
      // background-color: #175993;
      .serveContentLeft {
        width: 60%;
        height: 100%;
        border-right: 1px solid #ccc;
        // background-color: #175993;
      }
      .serveContentRight {
        width: 39%;
        height: 100%;
        // background-color: aqua;
        .srBtnBox {
          margin-bottom: 5px;
        }
      }
    }
  }
  .solveMethodsDetailBox {
    width: 100%;
    height: 220px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
  }
  .goodsInfoBox {
    width: 100%;
    height: 280px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    .goodsBtnBox {
      padding-left: 15px;
      margin-bottom: 15px;
    }
  }
  .truckServiceBox {
    width: 100%;
    height: 260px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    .serviceBox {
      width: 100%;
      height: 195px;
      display: flex;
      justify-content: center;
      align-items: center;
      .startBox {
        width: 50%;
        height: 100%;
        border-right: 1px solid #ccc;
        .startTitle {
          padding-left: 10px;
          font-weight: 600;
          color: #000;
        }
        .detailAddressBox {
          ::v-deep .el-input__inner {
            width: 430px;
          }
        }
        ::v-deep .el-input__inner {
          width: 140px;
        }
      }
      .endBox {
        width: 50%;
        height: 100%;
        .endTitle {
          padding-left: 10px;
          font-weight: 600;
          color: #000;
        }
        .detailAddressBox {
          ::v-deep .el-input__inner {
            width: 430px;
          }
        }
        ::v-deep .el-input__inner {
          width: 140px;
        }
      }
    }
  }
  .attachmentInfoBox {
    width: 100%;
    height: 200px;
    border: 1px solid #ccc;
  }
  .agreeFeeInfoBox {
    margin: 20px 0;
    height: 110px;
    width: 100%;
    border: 1px solid #ccc;
  }
  .auditInfoBox {
    width: 100%;
    height: 130px;
    border: 1px solid #ccc;
    .auditInfoBot {
      width: 100%;
      // height: 80px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 400px 0 20px;
    }
  }
}
// 费收弹窗样式
.feeDialogBox {
  height: 600px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  .feeLeftBox {
    width: 32%;
    height: 100%;
    border: 1px solid #ccc;
    position: relative;
    .feeLeftTitle {
      position: absolute;
      background-color: #fff;
      width: 130px;
      top: -12px;
      color: #000;
    }
    .feeLeftTopBox {
      height: 280px;
      width: 100%;
      border: 1px solid #ccc;
      margin-top: 20px;
      position: relative;
      padding: 10px 10px 0 0;
      .feeLeftTopTitle {
        position: absolute;
        top: -12px;
        background-color: #fff;
      }
      ::v-deep .orderInfo {
        .el-input__inner {
          border: none;
          background-color: #fff;
          color: blue;
        }
        .el-form-item {
          margin-bottom: 10px !important;
        }
      }
    }
    .feeLeftBotBox {
      height: 283px;
      width: 100%;
      margin-top: 15px;
      border: 1px solid #ccc;
      position: relative;
      .feeLeftBotTitle {
        position: absolute;
        top: -12px;
        background-color: #fff;
      }
    }
  }
  .feeRightBox {
    width: 67%;
    height: 100%;
    .feeRightTopBox {
      position: relative;
      width: 100%;
      height: 345px;
      border: 1px solid #ccc;
      .feeRightTopTitle {
        position: absolute;
        top: -12px;
        background-color: #fff;
      }
      .feeRightBtnBox {
        margin-top: 20px;
        padding-left: 15px;
        margin-bottom: 20px;
      }
    }
    .feeRightBotBox {
      position: relative;
      width: 100%;
      height: 240px;
      border: 1px solid #ccc;
      margin-top: 15px;
      .feeRightBotTitle {
        position: absolute;
        top: -12px;
        background-color: #fff;
      }
    }
  }
}
// 操作服务信息新增弹窗样式
.orderOptBox {
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
  position: relative;
  padding-top: 30px;
  .orderOptTitle {
    position: absolute;
    top: -12px;
    background-color: #fff;
  }
  ::v-deep .el-input__inner {
    width: 178px;
  }
}

::v-deep .searchBox {
  .el-form-item {
    display: flex;
    justify-content: space-between;
  }
  .el-checkbox {
    padding-top: 6px;
    margin-right: 0;
  }
  .el-form-item__label {
    padding: 0;
  }
  .el-input__inner {
    width: 130px;
  }
}
::v-deep .el-dialog {
  margin-top: 5vh !important;
}

// 弹窗标题样式
.basicTitle {
  width: 100%;
  // border: 1px solid #dfdfdf;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 0 10px #ccc;
  position: relative;
  display: block;
  float: left;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.basicTitle span {
  width: 150px;
  height: 50px;
  display: block;
  float: left;
  font-size: 18px;
  color: #fff;
  background: #175993;
  text-align: center;
  line-height: 50px;
}
.basicTitle .icon {
  width: 50px;
  height: 50px;
  background: #175993;
  display: block;
  float: left;
  span {
    color: #fff;
    font-size: 3rem;
    text-align: left;
    padding-left: 1.4rem;
  }
}
.basicTitle .order_span2 {
  width: auto;
  height: 50px;
  padding: 0px 15px;
  display: block;
  float: left;
  font-size: 18px;
  background: none;
  color: #33495e;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
}
</style>
